<template>
  <div class="gradient-background">
    <el-affix :offset="0">
      <div class="container">
        <div class="center">
          <div class="content-container">
            <mini_logo></mini_logo>
            <web_head></web_head>
          </div>
        </div>
      </div>
    </el-affix>
    <div class="center-content">
      <div style="padding-top: 100px; ">
        <know_buttons :knowid="knowidRef"></know_buttons>
      </div>
      <div style="width: 1000px;">
        <know_view :knowid="knowidRef" :set-html-handle="setHtmlHandle"></know_view>
      </div>
    </div>
    <div style="text-align: center;padding: 20px;margin-top: 100px;">
      <web_foot></web_foot>
    </div>
  </div>
  <ai_right_bar v-if="knowHtml" :html="knowHtml"></ai_right_bar>
</template>
<script setup lang="ts">
import ai_right_bar from '../ai/ai_right_bar.vue';
import know_buttons from './components/know_buttons.vue'
import know_view from './components/know_view.vue';
import mini_logo from '../know_creat/components/mini_logo.vue';
import web_head from '../components/web_head.vue';
import web_foot from '../components/web_foot.vue';
import { ref } from 'vue';
import farm2Request from '@/service/remoteRequests/Farm2Request';
import notice from '@/components/msg/FarmNotice';
const knowidRef = ref('');
import { useRoute } from 'vue-router';
import { RequestTypeEnum } from '@/types/commons/RequestTypeEnum';
import type { DataResponse } from '@/types/commons/DataResponse';
import farmHtmlUtils from '@/hook/farmHtmlUtils';
const route = useRoute();
const knowHtml = ref('');
knowidRef.value = route.params.id as string;


const setHtmlHandle = (html: string) => {
  knowHtml.value = html;
  getKnowFileContent(html)
}

const getKnowFileContent = (html: string) => {
  if (farmHtmlUtils.removeHtmltags(html).length < 200) {
    farm2Request.submit('api/wknow/fileContent', RequestTypeEnum.post, null, { id: knowidRef.value }).then((response: DataResponse) => {
      if ((response.data as string)) {
        knowHtml.value = knowHtml.value + "{{知识中包含附件内容为：{" + (response.data as string) + "}}}";
      }
    }).catch((msg: string) => {
      notice.byError(msg);
    });
  }
}


</script>
<style scoped>
/* 背景渐变样式 */
.gradient-background {
  background: linear-gradient(to bottom, #f8f8f8, #ffffff 300px);
  min-height: 100vh;
}

/* 外层容器样式 */
.container {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #ffffff;
}

/* 中心内容容器样式 */
.center {
  background-color: #ffffff;
  height: 52px;
  width: fit-content;
}

/* 内容布局容器样式 */
.content-container {
  min-width: 600px;
  width: 1000px;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.center-content {
  display: flex;
  /* 使用 Flexbox 布局 */
  justify-content: center;
  /* 水平居中 */
  /* 如果需要垂直居中，可以加上这一行 align-items: center;*/
  width: 100%;
}
</style>
